<template>
  <div class="show-code">
    <div ref="content" class="order-content">
      <menuTree v-if="menuTreeArr.length!==0" ref="node" :menu-tree-arr="menuTreeArr" @nodeClickEdit="nodeClickEdit" @handleNodeDelete="handleNodeDelete" @nodeClick="nodeClick" />
      <van-dialog v-model="show" :title="title" :show-cancel-button="false" :show-confirm-button="false">
        <van-form @submit="onSubmit">

          <van-cell class="van-cell--required" title="所属区县" :value="node.belongCounty" is-link @click="showAre=true" />

          <van-field
            v-model="node.address"
            name="地址"
            label="地址"
            placeholder="地址"
          />
          <van-field
            v-model="node.organizationName"
            type="organizationName"
            name="隔离点名称"
            label="隔离点名称"
            placeholder="隔离点名称"
            :rules="[{ required: true, message: '请填写隔离点名称' }]"
          />
          <van-field
            v-model="node.roomNumber"
            name="房间数"
            label="房间数"
            placeholder="房间数"
            type="number"
          />
        <van-cell class="van-cell--required" title="启用类型" :value="node.typeText" is-link @click="getType" />

          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit" @click="commit">提交</van-button>
            <van-button round block type="default" style="margin-top:10px;" @click.native="show=false">取消</van-button>

          </div>
        </van-form>
      </van-dialog>

    </div>
    <van-popup v-model="showAre" position="bottom" :style="{ height: '50%' }">
      <van-picker
        title="所属区县"
        show-toolbar
        :columns="optionArea"
        @confirm="onConfirmAre"
        @cancel="showAre=false"
      />
    </van-popup>
    <van-dialog v-model="deleteShow" title="删除节点" show-cancel-button show-confirm-button @cancel="deleteShow=false" @confirm="confirmDelete">
      <div>确认删除？</div>
    </van-dialog>
    <van-popup v-model="showType" position="bottom" :style="{ height: '50%' }">
      <van-picker
        title="房间类型"
        show-toolbar
        :columns="roomType"
        @confirm="onConfirmType"
        @cancel="showType=false"
      />
    </van-popup>
  </div>

</template>

<script>
import $api from '@/api/index'
import { Toast, Dialog } from 'vant'
import { getMessageByMsg } from '@/utils/validate'
import menuTree from './components/orangizeTreeManage.vue'
import Vue from 'vue'
import { Form } from 'vant'
import { Field } from 'vant'

Vue.use(Form)
Vue.use(Field)
Vue.use(Dialog)

export default {
  components: {
    menuTree
  },
  data() {
    return {
      menuTreeArr: [],
      show: false,
      node: {
        adress: '',
        organizationName: '',
        belongCounty: '',
        organizationCode: '',
        parentCode: '',
        roomNumber: '',
        enableType:'',
        typeText:''
      },
      title: '新增隔离点',
      optionArea: [
        { text: '万州区', id: '500101' },
        { text: '渝北区', id: '500112' },
        { text: '九龙坡区', id: '500107' },
        { text: '江北区', id: '500105' },
        { text: '渝中区', id: '500103' },
        { text: '涪陵区', id: '500102' },
        { text: '两江新区', id: '500000' },
        { text: '高新区', id: '500172' },
        { text: '沙坪坝区', id: '500106' },
        { text: '南岸区', id: '500108' },
        { text: '巴南区', id: '500113' },
        { text: '江津区', id: '500116' },
        { text: '永川区', id: '500118' },
        { text: '合川区', id: '500117' },
        { text: '北碚区', id: '500109' },
        { text: '长寿区', id: '500115' },
        { text: '大渡口区', id: '500104' },
        { text: '綦江区', id: '500110' },
        { text: '璧山区', id: '500120' },
        { text: '铜梁区', id: '500151' },
        { text: '潼南区', id: '500152' },
        { text: '荣昌区', id: '500153' },
        { text: '开州', id: '500154' },
        { text: '大足区', id: '500111' },
        { text: '南川区', id: '500119' },
        { text: '万盛区', id: '500110' },
        { text: '垫江县', id: '500231' },
        { text: '梁平县', id: '500155' },
        { text: '忠县', id: '500233' },
        { text: '奉节县', id: '500236' },
        { text: '黔江区', id: '500114' },
        { text: '云阳县', id: '500235' },
        { text: '丰都县', id: '500230' },
        { text: '武隆县', id: '500156' },
        { text: '巫山县', id: '500237' },
        { text: '巫溪县', id: '500238' },
        { text: '城口县', id: '500229' },
        { text: '石柱土家族自治县', id: '500240' },
        { text: '秀山土家族苗族自治县', id: '500241' },
        { text: '酉阳土家族苗族自治县', id: '500242' },
        { text: '彭水苗族土家族自治县', id: '500243' }
      ],
      showAre: false,
      nodeDeleteMessage: '',
      deleteShow: false,
      showType:false,
      roomType: [{ text: '24小时', id: 1, disabled: false }, { text: '48小时', id: 2, disabled: false }, { text: '72小时', id: 3, disabled: false }],

    }
  },
  mounted() {
    this.getMenu()
  },
  beforeCreate() {
    this.$dd.hideTitleBar()
    this.$dd.showTitleBar()
    this.$dd.ready(() => {
      this.$dd.setTitle({
        title: '隔离点'
      })
    })
  },
  beforeDestroy() {
    this.$dd.hideTitleBar()
  },
  destroyed() {
    this.$dd.hideTitleBar()
  },
  methods: {
    nodeClick(node) {
      this.title = '修改隔离点'
      this.node = node
      if (node.organziationCode === 'GO_1044cfb87c974031a5a544f9496cfc34') {
        this.node.leafFlag = node.leafFlag
      } else {
        this.node.leafFlag = node.leafFlag
      }
      if(this.node.enableType){
        this.node.typeText = this.roomType.filter((arg) => this.node.enableType === arg.id)[0].text

      }

      this.show = true
    },
    nodeClickEdit(node) {
      this.title = '新增隔离点'
      this.reset()
      if (node.organizationCode === 'GO_1044cfb87c974031a5a544f9496cfc34') {
        this.node.leafFlag = 0
      } else {
        this.node.leafFlag = 1
      }
      this.node.parentCode = node.organizationCode
      this.node.parentName = node.organizationName
      this.node.belongCounty = node.belongCounty
      this.node.belongCode = node.belongCode
      this.node.adress = node.adress
      this.show = true
    },
    handleNodeDelete(node) {
      try {
        this.deleteShow = true
        this.nodnodeDeleteMessagee = node
        $api.user.deleteOrganization(this.nodeDeleteMessage.id).then(res => {
          this.reset()
          this.getMenu()
        })
      } catch (error) {
        Toast(error)
      }
    },
    confirmDelete() {
      $api.user.deleteOrganization(this.nodeDeleteMessage.id).then(res => {
        Toast('删除成功')
        this.reset()
        this.getMenu()
      })
    },
    commit() {
      if (this.node.organizationCode) {
        $api.user.updateOrganization(this.node).then(res => {
          this.show = false
          this.reset()
          this.getMenu()
        })
      } else {
        $api.user.addOrganization(this.node).then(res => {
          this.show = false
          this.reset()
          this.getMenu()
        })
      }
    },
    getType() {
      this.showType = true
    },
    reset() {
      this.node = {
        adress: '',
        organizationName: '',
        belongCounty: '',
        organizationCode: '',
        parentCode: ''
      }
    },
    onConfirmType(value, index) {
      this.node.enableType = value.id
      this.node.typeText = value.text
      this.showType = false
    },
    getMenu() {
      $api.user.organizationMenuTreeAll().then(res => {
        this.menuTreeArr = getMessageByMsg(
          res.data = res.data.map(item => {
            item['name'] = item.organizationName
            item['checked'] = false
            return item
          }),
          {
            id: 'organizationCode',
            pid: 'parentCode',
            children: 'children'
          }
        )
      })
    },
    onConfirmAre(value, index) {
      this.node.belongCounty = value.text
      this.node.belongCode = value.id
      this.showAre = false
    }
  }
}
</script>

<style  lang="scss" scoped>

.show-code{
    width:100%;
    height:100%;
    .order-content{
        width:100%;
        height:100%;
        overflow-y: scroll;
        background-color:#f7f8fa;
        font-family: PingFangSC-Regular, PingFang SC;
    }
}
.mixing-station{
    background-color: #ffffff;
    padding:0px 10px;
    margin-top:20px;
}
.icon-class{
  width:40px;
  height:40px;
}
.order-title{
    padding: 20px 30px;
}

.content-info-submit{
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:44px;
  width:660px;
  height:88px;
  margin:0 auto;
}
::v-deep .van-button__text{
  font-weight:500;
  font-size:32px;
}
.title-message{
  padding-top:80px;
}
.van-confirm{
  width:100%;
  height:100%;
  border-radius:10px;
  box-shadow: 5px 3px 15px 0px rgba(42, 102, 234, 0.56);
}
.icon-title{
    display: flex;
    align-items: center;
}
.icon-title-content{
    padding-left: 20px;
    color: #333333;
    font-weight: Bold;
    font-size: 32px;
}
.mixing-station:not(:first-child){
    margin-top: 20px;
}

::v-deep [class*=van-hairline]::after{
    border: 0;
}
::v-deep .station{
}

 .message {
    ::v-deep .van-field__label {
      -webkit-box-flex: 0;
      -webkit-flex: none;
      -ms-flex: none;
      flex: none;
      box-sizing: border-box;
      width: 200px;
      margin-right: 16px;
      color: #646566;
      text-align: left;
      word-wrap: break-word;
  }
}
.messages{
  ::v-deep .van-field__label {
      -webkit-box-flex: 0;
      -webkit-flex: none;
      -ms-flex: none;
      flex: none;
      box-sizing: border-box;
      width: 250px;
      margin-right: 16px;
      color: #646566;
      text-align: left;
      word-wrap: break-word;
  }
}
.test .van-cell__value{
    display: flex;
    align-items:center;
}

.tests .van-cell__value{
    display: flex;
    align-items:center;
    position:relative;
}
.stop-update ::v-deep .van-cell__value{
    color:#969799;
  }
  .message-are{
    ::v-deep .van-cell__title{
      width: 270px;
    }
  }
  .content-person{
    padding:40px 20px;
    font-size:28px;
    color:#646566;
  }

::v-deep .van-cell__value{
    text-align: left;
    flex:2;
    font-size:28px;
    color:#323233;
    // color: #323233;
}
</style>
